<template>
	<view class="mypage"  >
		<view class="top" >
			<nav-bar  leftIcon="" title="我的" :color="afterHeaderOpacity>0.5?'#000':'#fff'" :backgroundColor="'rgba(255,255,255,'+afterHeaderOpacity+')'" :navbarbg="'rgba(255,255,255,'+afterHeaderOpacity+')'">
			</nav-bar>
			<view class="banner-container">
				<view class="my1">
					<view class="u-pic">
						<image :src="imgUrl+'er.png'" mode="aspectFill"></image>
					</view>
					<image class="vip" :src="imgUrl+'vip_card.png'" mode="aspectFill"></image>
				</view>
				<view class="my_left">
					<view class="h4" @click="!isLogin?goTo('/pages/commer/wxlogin'):'javascript:void(0)'">
						{{logMsg}}
					</view>	
					<view class="p1">
						NO：{{NO}}
					</view>	
					<view class="p2">
						余额：{{balance}}
					</view>	
					<image  class="my2" :src="imgUrl+'mys.png'" mode="aspectFit"></image>	
				</view>	
			</view>
		</view>
		<view class="member-cont mt100">
			<view v-for="(item,index) in contone" :key="index" class="my_item u-flex u-flex-between" @click="goToPage2(item,index)">
				<view class="left">
					<image :src="item.imgUrl" mode="aspectFit"></image>
					<text style="position: relative;">{{item.text}} <text class="dot" v-if="item.url =='/subpkg/my/info'&&!isInfoComplete"></text></text>
					
				</view>	
				<view class="r u-flex">
					<text v-if="item.lefttxt">{{item.lefttxt}}</text>
					<w-icon v-else type="more" color="#999" size="36rpx"></w-icon>
				</view>
			</view>
		</view>
		<view class="member-cont ">
			<view v-for="(item,idx) in conttwo" :key="idx" class="my_item u-flex u-flex-between" @click="goToPage2(item,index)">
				<view class="left">
					<image :src="item.imgUrl" mode="aspectFit"></image>
					<span>{{item.text}}</span>
				</view>	
				<w-icon type="more" color="#999" size="36rpx"></w-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/nav-bar.vue'
	import wIcon from '@/components/w-icon.vue'
	
	export default {
		components:{
			navBar,
			wIcon
		},
		// mixins:[scroll,globalConfig],
		data() {
			return {
				logMsg:"登录/注册",
				imgUrl:this.imgUrl,
				NO:"- -",
				balance:"- -",
				afterHeaderOpacity:0,
				contone:[
				// 	{
				// 	imgUrl:"https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/qrcode.png",
				// 	url:"/subpkg/my/qrcode",
				// 	text:"推荐码",
				// 	lefttxt:"",
				// 	hasLogin:true
				// },
				{
					imgUrl:"https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/record.png",
					url:"/subpkg/my/record",
					text:"消费记录",
					hasLogin:true,
					needbind:true
				},{
					imgUrl:"https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/coupon.png",
					url:"/subpkg/my/coupon",
					text:"我的礼券",
					hasLogin:true,
					needbind:true
				},{
					imgUrl:"https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/like.png",
					url:"/subpkg/my/like",
					text:"我的喜欢",
					hasLogin:true
				},{
					imgUrl:"https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/info.png",
					url:"/subpkg/my/info",
					text:"个人资料",
					hasLogin:true
				}],
				conttwo:[{
					imgUrl:"https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/setting.png",
					url:"/subpkg/my/setting",
					text:"设置",
					hasLogin:true
				},{
					imgUrl:"https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/about.png",
					url:"/subpkg/my/about",
					text:"关于我们",
					hasLogin:false
				},{
					imgUrl:"https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/icon_connect.png",
					url:"/subpkg/my/connect",
					text:"联系我们",
					hasLogin:false
				},
				],
				userInfo:"",
				isInfoComplete:true
			};
		},
		computed: {
			isLogin(){
				// return uni.upx2px(this.top);
				return uni.getStorageSync("isLogin")?uni.getStorageSync("isLogin"):false;
			},
		},
		created() {
			this.$a.GetOpenToken()
			if(this.isLogin){
				this.logMsg = uni.getStorageSync("userInfo").mobile;
				this.getMyCard();
				this.getMemberInfo();
				this.isMemberInfoComplete()
			}
		},
		mounted() {
			uni.$on("changeUserInfo",()=>{
				this.getMemberInfo();
			})
		},
		filters: {
			
		},
		methods: {
			getMyCard(){
				this.$http.GetMyCard({
					
				}).then(res => {
					if(res.code==0){
					if(res.content[0]&&res.content[0].cardno){
						this.NO = res.content[0].cardno
						this.balance = res.content[0].totalmoney
					}
					}
				})
			},
			getMemberInfo(){
				this.$http.GetMemberInfo({
					
				}).then(res => {
					if(res.code==0){
					if(res.content){
						this.userInfo = res.content;
						this.$store.commit('savemyUserInfo',res.content)
						uni.setStorageSync('userInfo',res.content)
						if(res.content.invitationCode){
							this.contone[0].lefttxt = res.content.invitationCode
						}
					}
					}
					
				})
			},
			isMemberInfoComplete(){
				this.$http.IsMemberInfoComplete({
					
				}).then(res => {
					if(res.code==0){
					this.isInfoComplete = res.content
					}
				})
			},
			goToPage2(item){
				let self=this;
				
				if(item.url=="/subpkg/my/qrcode"){
					if(this.userInfo&&this.userInfo.invitationCode){
						return;
					}
				}
				if(item.url=="/subpkg/my/record" || item.url =="/subpkg/my/coupon"){
					if(this.isLogin&&this.userInfo){
						if(!this.userInfo.cardNo){
							uni.showModal({
								title:"提示",
								content:"您还未绑定会员卡，请先绑定",
								success(res) {
									if(res.confirm){
										self.goTo('/subpkg/my/unbind')
									}
								}
							})
							return
						}
					}
				}
				if(item.url=="/subpkg/my/connect"){
					let phonenum = "0321-1234567"
					uni.showModal({
						content:"是否拨打电话"+phonenum,
						success(res) {
							if(res.confirm){
								uni.makePhoneCall({
									phoneNumber: phonenum//仅为示例
								});
							}
						}
					})
					return;
				}
				this.goToPage(item.url,item.hasLogin)
			}
		},
		onPageScroll(e) {
			let tmpY = 60;
			e.scrollTop = e.scrollTop > tmpY ? 60 : e.scrollTop;
			this.afterHeaderOpacity = e.scrollTop * (1 / tmpY);
		
		}
	};
	
</script>

<style lang="scss" scoped>
	.mypage{
		padding-bottom: 100rpx;
		background: #f8f8f8;
	}
	.top{
		height: 390rpx;
		background: #C2B7A2;	
	}
	.dot{
		display: inline-block;position: absolute;right: -10rpx;top: 10rpx;
		width: 10rpx;height: 10rpx;border-radius: 50%;background: red;
	}
	.banner-container{
		width: 690rpx;
		height: 306rpx;
		margin: 100rpx auto 0;
		background: #fff;
		border-radius: 16rpx;
		position: relative;
		padding: 30rpx;
		.my1{
			position: absolute;
			top: -60rpx;
			left: 30rpx;
			width: 120rpx;
			height: 120rpx;
			.u-pic{
				width:100%;
				height: 100%;
				border-radius: 50%;
				overflow: hidden;
				background: #C2B7A2;
			}
			
			image{
				width: 100%;
				height: 100%;
			}
			.vip{
				position: absolute;
				bottom: 0;
				left: 50%;
				width: 160rpx;
				height: 40rpx;
			}
		}
		.my_left{
			margin-top: 80rpx;
			.h4{font-size: 34rpx;color: #333;line-height: 60rpx;}
			.p1{font-size: 24rpx;color: #999;line-height: 50rpx;}
			.p2{font-size:32rpx ;color: #999;line-height: 50rpx;}
		}
		.my2{
				width: 120rpx;height: 120rpx;
			position: absolute;right: 50rpx;top:50rpx;
		}
	}
	
	.member-cont{
		width: 690rpx;
		margin:20rpx auto 0;
		background: #fff;
		border-radius: 16rpx;
		.my_item{
			padding: 30rpx;border-bottom: 1px solid #f8f8f8;
			.left{
				image{
					width:40rpx ;height: 40rpx;margin-right: 30rpx;vertical-align: top;
				}
			}
		}
		.my_item:last-child{
			border-bottom: none;
		}
	}
	.mt100{
		margin-top: 160rpx;
	}
</style>
